<template>
	<div>
		<img :src="`/src/assets/img/overview/personal-top-bg.png`" class="top_back_img" />
		<div>
			<el-row :gutter="5" class="top">
				<el-col :span="10">
					<div style="display: flex; justify-content: end; margin-right: 10px"><img :src="state.photoPath" class="circle" /></div
				></el-col>
				<el-col :span="14">
					<div class="top-texts">
						<div class="name">{{ state.fullName }}</div>
						<div class="depart">{{ state.userTypeName }}</div>
						<div class="time">登录时间：{{ state.loginTime }}</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts" setup name="personalInfoPage">
import { Session } from '@/utils/storage';
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------

const state = reactive({
	loginTime: $store.user.loginTime ? $store.user.loginTime : Session.get('bifang_loginTime'),
	loginIp: $store.user.loginIp ? $store.user.loginIp : Session.get('bifang_loginIp'),
	fullName: $store.user.fullName === '' ? '游客' : $store.user.fullName,
	userTypeName: $store.user.userTypeName,
	photoPath: $store.user.photoPath ? $store.user.photoPath : `/src/assets/img/avatar.png`,
});
//------------------定义调用方法-------------------------

//-------------------------初始化-----------------------------
</script>
<style scoped lang="scss">
.top_back_img {
	width: 100%;
	height: 100px;
}
.top {
	margin-top: -100px;
	display: flex;
	width: 100%;
	height: 100px;
	align-items: center;
}
.circle {
	margin-left: 20px;
	width: 60px;
	height: 60px;
	border: 5px solid #a4f4f6;
	border-radius: 60px;
	overflow: hidden;
}
.top-texts {
	display: flex;
	flex-direction: column;
	color: white;
	.name {
		font-size: 16px;
	}
	.depart {
		font-size: 12px;
	}
	.time {
		font-size: 12px;
	}
}
</style>
